<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main {
				width: 600px;
				margin: 10px auto;
			}
			
			.dsn {
				display: none;
			}
			
			ul {
				list-style: none;
				margin: 20 auto;
				padding: 0;
				box-shadow: 0 0 1px 1px #999;
				padding: 20px;
				overflow: hidden;
			}
			
			li {
				float: left;
				width: 100px;
				height: 30px;
				border: 1px solid;
				margin-left: 10px;
				text-align: center;
				line-height: 30px;
				margin-top: 10px;
				color: #fff;
				cursor: pointer;
			}
			
			li span {
				display: none;
			}
			
			.title {
				text-indent: 15px;
				position: relative;
			}
			
			.select {
				display: inline-block;
				color: #808695;
			}
		</style>
		<script src="js/zepto.min.js"></script>
		<script src="js/clipboard.min.js"></script>
	</head>

	<body>
		<div class="main">
			<p class="title">
				已复制颜色: <span class="select" id="color">无</span>
			</p>
			<ul>
				<li style="background: #2d8cf0;"> Primary </li>
				<li style="background: #5cadff;">Light Primary</li>
				<li style="background: #2b85e4;">Dark Primary</li>
				<li style="background: #2db7f5;">Info</li>
				<li style="background: #19be6b;">Success</li>
				<li style="background: #ff9900;">Warning</li>
				<li style="background: #ed4014;">Error</li>
				<li style="background: #17233d;">标题 Title</li>
				<li style="background: #515a6e;">正文 Content</li>
				<li style="background: #808695;">辅助/图标 Sub Color</li>
				<li style="background: #c5c8ce;">失效 Disabled</li>
				<li style="background: #c5c8ce;">边框 Border</li>
				<li style="background: #e8eaec;">分割线 Divider</li>
				<li style="background: #f8f8f9;">#f8f8f9</li>
				<li style="background: #f8f8f9;">背景 Background</li>
				<li style="background: xxxx;">xxxx</li>
				<li style="background: xxxx;">xxxx</li>
				<li style="background: xxxx;">xxxx</li>
			</ul>
			<input id="inp" value="" style="opacity: 0;"/>
		</div>
	</body>

</html>

<script type="text/javascript">
	var $inp = $('#inp');
	var $color = $('#color');
	$('body').on('click', 'li', function () {
		var color = $(this).css('background-color');
		// 转换成十六进制颜色
		color = color.colorHex();
		$inp.val(color);
		$inp[0].select();
		document.execCommand('copy');
		$color.text(color);
	})

	//十六进制颜色值的正则表达式
	var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
	/*RGB颜色转换为16进制*/
	String.prototype.colorHex = function () {
		var that = this;
		if (/^(rgb|RGB)/.test(that)) {
			var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
			var strHex = "#";
			for (var i = 0; i < aColor.length; i++) {
				var hex = Number(aColor[i]).toString(16);
				if (hex === "0") {
					hex += hex;
				}
				strHex += hex;
			}
			if (strHex.length !== 7) {
				strHex = that;
			}
			return strHex;
		} else if (reg.test(that)) {
			var aNum = that.replace(/#/, "").split("");
			if (aNum.length === 6) {
				return that;
			} else if (aNum.length === 3) {
				var numHex = "#";
				for (var i = 0; i < aNum.length; i += 1) {
					numHex += (aNum[i] + aNum[i]);
				}
				return numHex;
			}
		} else {
			return that;
		}
	};
</script>